<!-- 机房管理 -->
<template>
  <div class="ky-container">
    <div @click="closeRight">
      <el-card shadow="hover" class="ky-card ky-card-xs ky-card-hdbg" v-show="!isExtend">
        <el-form ref="form" :model="formData" :inline="true" class="ky-form-inline ky-form-inline-sm" label-width="80px">
          <el-form-item label="医院名称" prop="hospitalCode">
            <el-select
              size="small"
              class="param-type_input"
              v-model="formData.hospitalCode"
              @change="handleChange('hospital')"
              placeholder="请选择"
              filterable
            >
              <el-option
                v-for="(item,index) in mx_hospitalList"
                :key="index"
                :label="item.name"
                :value="item.code"
              ></el-option>
            </el-select>
          </el-form-item>
          <!-- 医院代码》院区名称》影像院区》检查类型》检查部门》设备类型》检查设备》检查分组》检查机房 -->
          <el-form-item label="影像区域" prop="depArea">
            <el-select
              size="small"
              class="param-type_input"
              v-model="formData.depArea"
              multiple
              placeholder="请选择"
              clearable
              collapse-tags
              @change="handleChange('depArea')"
            >
              <el-option
                v-for="(item,index) in depAreaOptions"
                :key="index"
                :label="item"
                :value="item"
              ></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="检查部门">
            <el-select
              size="small"
              class="param-type_input"
              v-model="formData.dep"
              multiple
              placeholder="请选择"
              clearable
              collapse-tags
              @change="handleChange('dep')"
            >
              <el-option
                v-for="(item,index) in depOptions"
                :key="index"
                :label="item"
                :value="item"
              ></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="检查分组">
            <el-select
              size="small"
              class="param-type_input"
              v-model="formData.checkGroup"
              multiple
              placeholder="请选择"
              clearable
              collapse-tags
            >
              <el-option
                v-for="(item,index) in checkGroupOptions"
                :key="index"
                :label="item"
                :value="item"
              ></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="设备类型">
            <el-select
              size="small"
              class="param-type_input"
              v-model="formData.modalityType"
              multiple
              placeholder="请选择"
              clearable
              collapse-tags
              @change="handleChange('modalityType')"
            >
              <el-option
                v-for="(item,index) in modalityTypeOptions"
                :key="index"
                :label="item"
                :value="item"
              ></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="机房名称">
            <el-input
              size="small"
              class="param-name_input"
              v-model="formData.checkRoom"
              placeholder="请输入"
              clearable></el-input>
          </el-form-item>
          <el-form-item label="机房状态">
            <el-select
              size="small"
              class="param-type_input"
              v-model="formData.checkRoomState"
              placeholder="请选择"
              clearable
              collapse-tags
            >
              <el-option
                v-for="(item,index) in checkRoomStateOptions"
                :key="index"
                :label="item"
                :value="item"
              ></el-option>
            </el-select>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" class="m-l-0 click-button" size="small" icon="el-icon-search" @click="search">查询</el-button>
            <el-button class="m-l-0" size="small" @click="extendBtn" plain>{{isExtend == 1 ? '收缩' : '展开'}}</el-button>
            <el-button class="m-l-0 click-button" size="small" @click="resetParam" plain>重置</el-button>
            <el-button
              v-permission="'YJYY10005018'"
              type="primary"
              size="small"
              @click.stop="getRightPanel(pageStatus.add)"><i class="el-icon-plus icon"></i> 新增机房</el-button>
          </el-form-item>
        </el-form>
      </el-card>
      <el-card shadow="hover" class="ky-card ky-card-xs ky-card-hdbg" v-show="isExtend">
        <el-form ref="form" :model="formData" :inline="true" class="ky-form-inline ky-form-inline-sm" label-width="80px">
          <el-form-item label="医院名称" prop="hospitalCode">
            <el-select
              size="small"
              class="param-type_input"
              v-model="formData.hospitalCode"
              @change="handleChange('hospital')"
              placeholder="请选择"
              filterable
            >
              <el-option
                v-for="(item,index) in mx_hospitalList"
                :key="index"
                :label="item.name"
                :value="item.code"
              ></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="院区名称" prop="areaName">
            <el-select
              size="small"
              class="param-type_input"
              v-model="formData.areaName"
              multiple
              placeholder="请选择"
              clearable
              collapse-tags
              @change="handleChange('areaName')"
            >
              <el-option
                v-for="(item,index) in areaNameOptions"
                :key="index"
                :label="item"
                :value="item"
              ></el-option>
            </el-select>
          </el-form-item>
          <!-- 医院代码》院区名称》影像院区》检查类型》检查部门》设备类型》检查设备》检查分组》检查机房 -->
          <el-form-item label="影像区域" prop="depArea">
            <el-select
              size="small"
              class="param-type_input"
              v-model="formData.depArea"
              multiple
              placeholder="请选择"
              clearable
              collapse-tags
              @change="handleChange('depArea')"
            >
              <el-option
                v-for="(item,index) in depAreaOptions"
                :key="index"
                :label="item"
                :value="item"
              ></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="检查类型" prop="examType">
            <el-select
              size="small"
              class="param-type_input"
              v-model="formData.examType"
              multiple
              placeholder="请选择"
              clearable
              collapse-tags
              @change="handleChange('examType')"
            >
              <el-option
                v-for="(item,index) in examTypeOptions"
                :key="index"
                :label="item"
                :value="item"
              ></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="检查部门">
            <el-select
              size="small"
              class="param-type_input"
              v-model="formData.dep"
              multiple
              placeholder="请选择"
              clearable
              collapse-tags
              @change="handleChange('dep')"
            >
              <el-option
                v-for="(item,index) in depOptions"
                :key="index"
                :label="item"
                :value="item"
              ></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="检查分组">
            <el-select
              size="small"
              class="param-type_input"
              v-model="formData.checkGroup"
              multiple
              placeholder="请选择"
              clearable
              collapse-tags
              @change="handleChange('checkGroup')"
            >
              <el-option
                v-for="(item,index) in checkGroupOptions"
                :key="index"
                :label="item"
                :value="item"
              ></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="设备类型">
            <el-select
              size="small"
              class="param-type_input"
              v-model="formData.modalityType"
              multiple
              placeholder="请选择"
              clearable
              collapse-tags
              @change="handleChange('modalityType')"
            >
              <el-option
                v-for="(item,index) in modalityTypeOptions"
                :key="index"
                :label="item"
                :value="item"
              ></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="检查设备">
            <el-select
              size="small"
              class="param-type_input"
              v-model="formData.modality"
              multiple
              placeholder="请选择"
              clearable
              collapse-tags
            >
              <el-option
                v-for="(item,index) in modalityOptions"
                :key="index"
                :label="item"
                :value="item"
              ></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="机房名称">
            <el-input
              size="small"
              class="param-name_input"
              v-model="formData.checkRoom"
              placeholder="请输入"
              clearable></el-input>
          </el-form-item>
          <el-form-item label="机房状态">
            <el-select
              size="small"
              class="param-type_input"
              v-model="formData.checkRoomState"
              placeholder="请选择"
              clearable
              collapse-tags
            >
              <el-option
                v-for="(item,index) in checkRoomStateOptions"
                :key="index"
                :label="item"
                :value="item"
              ></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="机房类型">
            <el-select
              size="small"
              class="param-type_input"
              v-model="formData.virtualRoom"
              placeholder="请选择"
              clearable
              collapse-tags
            >
              <el-option
                v-for="item in virtualRoomOptions"
                :key="item.value"
                :value="item.value"
                :label="item.label"
              ></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="执行科室" prop="department" class="short-input">
            <el-select
              size="small"
              class="param-type_input"
              v-model="formData.department"
              multiple
              placeholder="请选择"
              clearable
              collapse-tags
              @change="handleChange('department')"
            >
              <el-option
                v-for="(item,index) in departmentOptions"
                :key="index"
                :label="item"
                :value="item"
              ></el-option>
            </el-select>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" class="m-l-0 click-button" size="small" icon="el-icon-search" @click="search">查询</el-button>
            <el-button class="m-l-0" size="small" @click="extendBtn" plain>{{isExtend == 1 ? '收缩' : '展开'}}</el-button>
            <el-button class="m-l-0 click-button" size="small" @click="resetParam" plain>重置</el-button>
            <el-button
              v-permission="'YJYY10005018'"
              type="primary"
              size="small"
              @click.stop="getRightPanel(pageStatus.add)"><i class="el-icon-plus icon"></i>新增机房</el-button>
          </el-form-item>
        </el-form>
      </el-card>
      <div class="quickfilter-content ky-mt10">
        <el-card v-show="quickFilterStatus" shadow="hover" class="qf-sidebar ky-card ky-card-hdbg">
          <div class="content-title">
            <span>快速查询</span>
            <i class="el-icon-arrow-left ky-fr ky-pointer ky-ft16 ky-fw600" @click="quickFilterStatus = false"></i>
          </div>
          <HospAreaDepFilter
            ref="hospAreaDepFilter"
            :hospital-code="formData.hospitalCode"
            @treeChange="treeChange"></HospAreaDepFilter>
        </el-card>
        <el-card shadow="hover" class="qf-box ky-card ky-card-hdbg">
          <div class="content-title flex flex-row align-center">
            <i class="el-icon-arrow-right ky-pointer ky-ft16 ky-fw600" v-show="!quickFilterStatus" @click="quickFilterStatus = true"></i>
            <span style="float: left;">机房列表</span>
            <span style="color: red;font-size: 14px;float: left;">【支持批量设置 （检查分组）、（检查地点）、（检查院区） 、（检查类型）】</span>
            <div class="mar-l-10">
              <checkRoomSort
                @get-virtual-room-name="getVirtualRoomName"
                @refresh="search"
                :hospital-code="formData.hospitalCode"
                :check-room-value="checkRoomValue"
                :config-visible.sync="configVisible"
                :table-data="tableData"
              />
            </div>
          </div>
          <!-- <el-button @click="checkGroupSort">机房排序</el-button> -->
          <el-table
            ref="table"
            v-loading="loading"
            size="medium"
            :data="tableData"
            style="width: 100%"
            border
            @selection-change="handleSelectionChange"
            class="ky-table"
            highlight-current-row
          >
            <el-table-column type="selection" width="55"></el-table-column>
            <el-table-column align="left" fixed label="操作" :width="!isOpenRoomConfig ? 360:280" v-if="$hasPermission(['YJYY10005019','YJYY10005020','YJYY10005021'])">
              <template slot-scope="scope">
                <div class="flex flex-row justify-center">
                  <el-button
                    type="primary"
                    size="small"
                    v-permission="'YJYY10005021'"
                    @click.stop="bindHis(scope.$index, scope.row)"><i class="el-icon-circle-plus"></i> 绑定部位</el-button>
                  <el-button
                    type="primary"
                    size="small"
                    v-permission="'YJYY10005019'"
                    @click.stop="getRightPanel(pageStatus.edit,scope.row)"><i class="el-icon-edit"></i> 编辑</el-button>
                  <el-button
                    type="danger"
                    size="small"
                    v-permission="'YJYY10005020'"
                    @click.stop="handleDelete(scope.$index, scope.row)"
                    v-if="!isOpenRoomConfig"><i class="el-icon-delete"></i> 删除</el-button>
                  <el-button :type="scope.row.checkRoomState==='正常' ? 'warning':'success'" v-permission="'YJYY10005019'" size="small" @click.stop="handleLock(scope.row)"><i :class="scope.row.checkRoomState==='正常' ? 'el-icon-lock':'el-icon-unlock'"></i> {{scope.row.checkRoomState==='正常' ? '关闭' : '打开'}}</el-button>
                </div>
              </template>
            </el-table-column>
            <el-table-column align="left" prop="checkRoom" label="机房名称" min-width="110"></el-table-column>
            <el-table-column align="left" prop="checkRoomState" label="机房状态">
              <template slot-scope="scope">
                <span :class="scope.row.checkRoomState==='关闭' ? 'fc_red':'fc_success'">
                  {{scope.row.checkRoomState}}
                </span>
              </template>
            </el-table-column>
            <el-table-column align="left" prop="virtualRoom" label="机房类型">
              <template slot-scope="scope">
                {{getVirtualRoomName(scope.row.virtualRoom)}}
              </template>
            </el-table-column>
            <!-- <el-table-column align="left" prop="hospitalName" label="医院名称" width="210px"></el-table-column> -->
            <el-table-column align="left" prop="depArea" label="影像区域" show-overflow-tooltip></el-table-column>
            <el-table-column align="left" prop="department" label="执行科室" show-overflow-tooltip></el-table-column>
            <el-table-column align="left" prop="dep" label="检查部门" show-overflow-tooltip></el-table-column>
            <el-table-column align="left" prop="checkGroup" label="分组" show-overflow-tooltip></el-table-column>
            <el-table-column align="left" prop="modalityAddress" label="检查地点" min-width="100" show-overflow-tooltip></el-table-column>
            <el-table-column align="left" prop="examType" label="检查类型" show-overflow-tooltip></el-table-column>
            <el-table-column align="left" prop="modalityType" label="设备类型" show-overflow-tooltip></el-table-column>
            <el-table-column align="left" prop="modality" label="设备名称" show-overflow-tooltip></el-table-column>
            <el-table-column align="left" prop="machineType" label="设备型号" min-width="130" show-overflow-tooltip></el-table-column>
            <el-table-column align="left" prop="roomNo" label="房间号" min-width="100" show-overflow-tooltip></el-table-column>
            <!-- <el-table-column align="left" prop="nurseStation" label="护士站" min-width="120"></el-table-column> -->
            <!-- <el-table-column align="left" prop="callMac" label="MAC地址" width="120"></el-table-column> -->
            <!-- <el-table-column align="left" prop="callType" label="排队号前缀" width="120"></el-table-column> -->
            <el-table-column align="left" prop="areaName" label="医院院区名称" width="120" show-overflow-tooltip></el-table-column>
            <el-table-column align="left" prop="areaNo" label="医院院区代码" width="120" show-overflow-tooltip></el-table-column>
            <el-table-column align="left" prop="checkRoomOrser" label="排序" width="80" show-overflow-tooltip></el-table-column>
            <el-table-column align="left" prop="haveGroup" label="护士站分组" min-width="100" show-overflow-tooltip></el-table-column>
          </el-table>
          <paginationCont
            :total="totalCount"
            :page.sync="currentPage"
            :limit.sync="pageSize"
            @pagination="changePagination"
          />
        </el-card>
      </div>
      <transition name="fade-form" mode="out-in">
        <div :class="{'toolBox-small':device !== 'mobile' && sidebar.opened,'toolBox-midul': device !== 'mobile' && !sidebar.opened,'toolBox-large':device == 'mobile','toolBox':true}" v-show="showToolBox">
          <div>
            <i class="el-icon-info icon blue-color"></i>
            <span class="toolBox-text">已选择<span class="blue-color">{{multipleSelection.length}}</span>项</span>
            <span class="cancle-click" @click="cancleChoose">取消选择</span>
          </div>
          <div>
            <!-- <el-button type="primary" size="small" @click="batchSetField('nurseStation')">批量设置护士站</el-button> -->
            <el-button type="primary" size="small" @click="batchSetField('checkGroup')">批量设置检查分组</el-button>
            <el-button type="primary" size="small" @click="batchSetField('modalityAddress')">批量设置检查地点</el-button>
            <el-button type="primary" size="small" @click="batchSetField('area')">批量设置院区</el-button>
            <el-button type="primary" size="small" @click="batchSetField('examType')">批量设置检查类型</el-button>
            <el-button type="warning" size="small" v-if="onFlag&&!offFlag" @click="batchSetStatus">批量关闭</el-button>
            <el-button type="success" size="small" v-else-if="!onFlag&&offFlag" @click="batchSetStatus">批量打开</el-button>
            <el-button type="danger" size="small" @click="batchDelete">批量删除</el-button>
          </div>
        </div>
      </transition>
    </div>
    <editRoom
      ref="editRoom"
      :hospital-code.sync="formData.hospitalCode"
      :form-data.sync="formData"
      :show-right.sync="showRight"
      :cur-status="curStatus"
      :row-data.sync="rowData"
      :title.sync="title"
      @refresh="search"
      @refreshTree="refreshTree"></editRoom>
    <bindHisDialog ref="bindDialog" :cur-row="bindRowData" :show-right.sync="bindShow" :title="title" @changeCurRow="changeCurRow"></bindHisDialog>
    <!-- 批量设置 area（院区）、modalityAddress（机房地址）、nurseStation（护士站） -->
    <BatchSet
      :hospital-code.sync="formData.hospitalCode"
      :dep.sync="formData.dep"
      :ids.sync="batchSetIds"
      :batch-set-type.sync="batchSetType"
      :batch-set-dlg.sync="batchSetDlg"
      @refresh="search"
    />
  </div>
</template>

<script>
import {
  getDepAreaList,
  getDepList,
  getModalityList,
  getModalityTypeList,
  getCheckRoomList,
  getItemList,
  getCheckroomPages,
  deleteCheckroom,
  updateCheckroomState,
  getlistbyareaname,
  getExamList,
  getCheckGroupList
} from '@/api/api.js'
import { removeLocalStorage } from '@/utils/localStorage'
import paginationCont from '@/components/Pagination/index'
import checkRoomSort from '@/components/appConfig/check/checkRoomSort'
import HospAreaDepFilter from '@/components/treeFilter/hospitalAreaDepTree'
import { PageStatus } from '@/utils/constant'
import { roomStatusFlr } from '@/utils/validate'
import editRoom from './editRoom'
import bindHisDialog from './bindHisDialog'
import BatchSet from './batchSet'
import bus from '@/api/bus.js'
// import { removeDefaultCheckRoom } from '@/utils/auth'
export default {
  name: '',
  components: {
    paginationCont,
    editRoom,
    bindHisDialog,
    HospAreaDepFilter,
    BatchSet,
    checkRoomSort
  },
  filters: {
    roomStatusFlr
  },
  data() {
    return {
      isExtend: 0,
      pageStatus: PageStatus,
      isOpenRoomConfig: window.g.isOpenRoomConfig,
      isFilterMerge: window.g.isFilterMerge,
      configVisible: false,
      checkRoomValue: '',
      formData: {
        hospitalCode: this.$store.state.user.hospitalCode,
        depArea: [],
        dep: [],
        modality: [],
        modalityType: [],
        areaName: [], //  院区名称
        examType: [],
        checkGroup: [],
        checkRoom: '',
        checkRoomState: '',
        virtualRoom: '-1' // 机房类型
      },
      depAreaOptions: [],
      areaNameOptions: [],
      examTypeOptions: [],
      checkGroupOptions: [],
      depOptions: [],
      modalityOptions: [],
      modalityTypeOptions: [],
      checkRoomOptions: [],
      departmentOptions: [],
      checkRoomStateOptions: ['正常', '关闭'],
      virtualRoomOptions: [
        { label: '全部机房', value: '-1' },
        { label: '检查机房', value: '0' },
        { label: '虚拟机房', value: '1' },
        { label: '预约池', value: '2' }
      ],
      tableData: [
        /* {
          checkRoom: 'CT1室',
          checkRoomState: '正常',
          hospital: '温州医科大学附属第一医院',
          depArea: '南院',
          dep: '门诊部',
          checkGroup: '分组1',
          modality: 'TradeCode21'
        } */
      ],
      totalCount: 0,
      pageSize: 10,
      currentPage: 1,
      loading: false,
      multipleSelection: [],
      showToolBox: false,
      onFlag: false,
      offFlag: false,
      showRight: false,
      bindShow: false,
      curStatus: '',
      rowData: {},
      bindRowData: {},
      title: '',

      // 快速查询
      quickFilterReady: false,
      quickFilterStatus: true,

      // 批量设置
      batchSetIds: [],
      batchSetType: '',
      batchSetDlg: false
    }
  },
  watch: {
    multipleSelection(val) {
      if (val && val.length >= 1) {
        this.showToolBox = true
        this.onFlag = false
        this.offFlag = false
        val.forEach(el => {
          if (el.checkRoomState === '正常') {
            this.onFlag = true
          } else {
            this.offFlag = true
          }
        })
      } else {
        this.showToolBox = false
      }
    }
  },
  computed: {
    sidebar() {
      return this.$store.state.app.sidebar
    },
    device() {
      return this.$store.state.app.device
    }
  },
  created() {
    this.$getHospitalList()
    removeLocalStorage('roomTree')
    // removeDefaultCheckRoom()
  },
  mounted() {
    this.formData.hospitalCode = this.$store.state.user.hospitalCode || ''
    try {
      this.getDepAreaOptions()
      this.getDepartment()
      this.getDepOptions()
      this.getModalityOptions()
      this.getModalityTypeOptions()
      this.getAreaNameOptions()
      this.getExamTypeOptions()
      this.getExamGroupOptions()
      // this.search()
    } catch (err) {
      console.log(err)
    }
    this.$nextTick(() => {
      this.$refs.hospAreaDepFilter && this.$refs.hospAreaDepFilter.init()
    })
    // console.error('来这里了', this.tableData)
    // this.search()
  },
  methods: {
    changeCurRow(params) {
      this.bindRowData = params
    },
    extendBtn() {
      this.isExtend = this.isExtend == 1 ? 0 : 1
    },
    getVirtualRoomName(name) {
      if (!name) return '检查机房'
      const find = this.virtualRoomOptions.find(item => item.value == name)
      this.checkRoomValue = find ? find.label : ''
      return find ? find.label : ''
    },
    closeRight() {
      this.showRight = false
      this.bindShow = false
    },
    resetParam() {
      // 重置
      const resetForm = {
        hospitalCode: this.$store.state.user.hospitalCode,
        depArea: [],
        dep: [],
        modality: [],
        department: [],
        modalityType: [],
        checkRoom: '',
        virtualRoom: '-1',
        areaName: [],
        examType: [],
        checkGroup: []
      }
      this.formData = Object.assign(this.formData, resetForm)
      this.getDepAreaOptions()
      this.getDepartment()
      this.getDepOptions()
      this.getModalityOptions()
      this.getModalityTypeOptions()
      this.getAreaNameOptions()
      this.getExamTypeOptions()
      this.getExamGroupOptions()
      this.$refs.hospAreaDepFilter && this.$refs.hospAreaDepFilter.reset()
    },
    refreshTree() {
      this.$refs.hospAreaDepFilter && this.$refs.hospAreaDepFilter.init()
    },
    search() {
      this.currentPage = 1
      this.fetchData()
    },
    changePagination() {
      this.$refs.form.validate((valid) => {
        if (valid) {
          this.fetchData()
        }
      })
    },
    fetchData() {
      this.cancleChoose()
      this.loading = true
      let data = {
        ...this.formData,
        depArea: this.formData.depArea.join(','),
        department: this.formData.department.join(','),
        dep: this.formData.dep.join(','),
        modality: this.formData.modality.join(','),
        modalityType: this.formData.modalityType.join(','),
        // checkRoom: this.formData.checkRoom,
        virtualRoom: this.formData.virtualRoom || '-1',
        // 院区名称
        areaName: this.formData.areaName.join(','),
        examType: this.formData.examType.join(','),
        checkGroup: this.formData.checkGroup.join(','),
        pageSize: this.pageSize, // 页面大小
        pageNumber: this.currentPage // 页码
        // sortOrder: 'Desc',
        // sortName: 'checkRoomOrser'
      }
      getCheckroomPages(data).then(res => {
        this.loading = false
        if (res && res.code === 10000) {
          // this.tableData = res.content.list
          let list = res.content.list
          let ddSort = (a, b) => {
            return a.checkRoomOrser - b.checkRoomOrser
          }
          this.tableData = list.sort(ddSort)
          console.error('来这里了麻', this.tableData)
          data.pageSize = this.totalCount = res.content.totalCount
          bus.$emit('checkRoomTableInfo', data)
          // this.$refs.bindDialog.getHisTree(this.formData.hospitalCode)
        }
      }).catch(() => {
        this.loading = false
      })
    },
    bindHis(i, row) {
      this.$refs.table.setCurrentRow(row)
      this.bindRowData = row
      this.title = row.checkRoom
      this.showRight = false
      this.bindShow = true
    },
    // 获取右边form
    getRightPanel(status, params) {
      this.$refs.table.setCurrentRow(params)
      this.curStatus = status
      if (params) {
        this.rowData = params
        // this.rowData.haveGroup = this.rowData.haveGroup && this.rowData.haveGroup != null ? this.rowData.haveGroup.split(',') : []
        // this.row.haveGroup = this.row.haveGroup.split(',')
        this.title = params.checkRoom
      } else {
        this.rowData = null
      }
      this.showRight = true
      this.bindShow = false
    },
    handleDelete(i, row) {
      let confirmMsg = '此操作将永久删除该机房, 是否继续?'
      if (this.rowData && this.rowData.id === row.id) {
        confirmMsg = '该条机房正在编辑, 是否删除?'
      }
      this.$confirm(confirmMsg, '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.deleteData(row)
      })
        .catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          })
        })
    },
    deleteData(row) {
      deleteCheckroom({ id: row.id, hospitalCode: row.hospitalCode }).then((res) => {
        if (res.code === 10000) {
          this.$message.success('删除成功')
          this.showRight = false
          this.bindShow = false
          this.changePagination()

          // 本地缓存排班管理的机房选择数据重置默认选项
          // this.$store.dispatch('user/getDefaultCheckRoomTree')
          // this.$store.dispatch('user/resetDefaultCheckRoom', [])
        }
      })
    },
    handleLock(row) {
      let tip = row.checkRoomState === '正常' ? '关闭' : '打开'
      this.$confirm(`此操作将${tip}该机房, 是否继续?`, '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.lockData(row)
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消'
        })
      })
    },
    lockData(row) {
      let status = row.checkRoomState === '正常' ? '关闭' : '正常'
      updateCheckroomState({ id: row.id, checkRoomState: status, hospitalCode: row.hospitalCode }).then((res) => {
        if (res.code === 10000) {
          this.$message.success('状态更新成功')
          this.changePagination()
          if (this.rowData && row.id === this.rowData.id) {
            this.$refs.editRoom.changeStatus(status)
          }
        }
      })
    },
    handleSelectionChange(val) {
      this.multipleSelection = val
    },
    cancleChoose() {
      // 取消选择
      this.multipleSelection = []
      this.$refs.table.clearSelection()
    },
    batchSetStatus() {
      // 批量禁用
      let tip = this.multipleSelection[0].checkRoomState === '正常' ? '关闭' : '打开'
      this.$confirm(`此操作将批量${tip}机房, 是否继续?`, '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(async () => {
        let successNum = 0
        let faliNum = 0
        for (let v of this.multipleSelection) {
          let data = {
            hospitalCode: v.hospitalCode,
            id: v.id,
            checkRoomState: v.checkRoomState === '正常' ? '关闭' : '正常'
          }
          await updateCheckroomState(data).then(res => {
            // 改掉列表的数据
            if (res && res.code === 10000) {
              successNum++
            } else {
              faliNum++
            }
          })
        }
        this.changePagination()
        this.$message.success(`已经成功${tip}` + successNum + '条,失败' + faliNum + '条')

        // 本地缓存排班管理的机房选择数据重置默认选项
        // this.$store.dispatch('user/getDefaultCheckRoomTree')
        // this.$store.dispatch('user/resetDefaultCheckRoom', [])
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消'
        })
      })
    },
    batchDelete() {
      // 批量删除
      let confirmMsg = '此操作将永久批量删除该选中机房, 是否继续?'
      this.$confirm(confirmMsg, '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(async () => {
        let successNum = 0
        let faliNum = 0
        for (let v of this.multipleSelection) {
          let data = {
            hospitalCode: v.hospitalCode,
            id: v.id
          }
          await deleteCheckroom(data).then(res => {
            if (res && res.code === 10000) {
              successNum++
            } else {
              faliNum++
            }
          })
        }
        this.changePagination()
        this.$message.success(`已经成功删除` + successNum + '条,失败' + faliNum + '条')

        // 本地缓存排班管理的机房选择数据重置默认选项
        // this.$store.dispatch('user/getDefaultCheckRoomTree')
        // this.$store.dispatch('user/resetDefaultCheckRoom', [])
      })
        .catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          })
        })
    },
    // 批量设置
    batchSetField(type) {
      // type : area（院区）、modalityAddress（机房地址）、nurseStation（护士站）、checkGroup（机房分组）
      let ids = this.multipleSelection.map(ms => ms.id)
      this.batchSetIds = ids
      this.batchSetType = type
      this.batchSetDlg = true
    },
    // 医院代码》院区名称》影像院区》检查类型》检查部门》设备类型》检查设备》检查分组》检查机房
    getDepartment() {
      let data = {
        HospitalCode: this.formData.hospitalCode,
        areaName: this.formData.areaName.join(','),
        // DepArea: this.formData.depArea.join(','),
        type: '科室'
      }
      return new Promise(resolve => {
        getItemList(data).then(res => {
          if (res && res.code === 10000) {
            this.departmentOptions = res.content.list.map(_item => _item.item)
            resolve(res)
          }
        })
      })
    },
    getDepAreaOptions() {
      let data = {
        HospitalCode: this.formData.hospitalCode,
        areaName: this.formData.areaName.join(',')
      }
      return new Promise(resolve => {
        getDepAreaList(data).then(res => {
          if (res.code === 10000) {
            this.depAreaOptions = res.content.list
            resolve(res)
          }
        })
      })
    },
    getDepOptions() {
      const params = {
        hospitalCode: this.formData.hospitalCode,
        areaName: this.formData.areaName.join(','),
        depArea: this.formData.depArea.join(','),
        examType: this.formData.examType.join(',')
      }
      return new Promise(resolve => {
        getDepList(params).then(res => {
          if (res.code === 10000) {
            this.depOptions = res.content.list
            resolve(res)
          }
        })
      })
    },
    getModalityOptions() {
      const params = {
        hospitalCode: this.formData.hospitalCode,
        areaName: this.formData.areaName.join(','),
        depArea: this.formData.depArea.join(','),
        examType: this.formData.examType.join(','),
        dep: this.formData.dep.join(',')
      }
      return new Promise(resolve => {
        getModalityList(params).then(res => {
          if (res.code === 10000) {
            this.modalityOptions = res.content.list
            resolve(res)
          }
        })
      })
    },
    getModalityTypeOptions() {
      const params = {
        hospitalCode: this.formData.hospitalCode,
        areaName: this.formData.areaName.join(','),
        depArea: this.formData.depArea.join(','),
        examType: this.formData.examType.join(','),
        dep: this.formData.dep.join(','),
        modalityType: this.formData.modalityType.join(',')
      }
      return new Promise(resolve => {
        getModalityTypeList(params).then(res => {
          if (res.code === 10000) {
            this.modalityTypeOptions = res.content.list
            resolve(res)
          }
        })
      })
    },
    getCheckRoomOptions() {
      const params = {
        hospitalCode: this.formData.hospitalCode,
        areaName: this.formData.areaName.join(','),
        depArea: this.formData.depArea.join(','),
        examType: this.formData.examType.join(','),
        dep: this.formData.dep.join(','),
        modalityType: this.formData.modalityType.join(','),
        checkGroup: this.formData.checkGroup.join(','),
        virtualRoom: this.formData.virtualRoom
      }
      return new Promise(resolve => {
        getCheckRoomList(params).then(res => {
          if (res.code === 10000) {
            this.checkRoomOptions = res.content.list
            resolve(res)
          }
        })
      })
    },
    getAreaNameOptions() {
      const params = {
        hospitalCode: this.formData.hospitalCode
      }
      return new Promise(resolve => {
        getlistbyareaname(params).then(res => {
          if (res.code === 10000) {
            this.areaNameOptions = res.content.list
            resolve(res)
          }
        })
      })
    },
    getExamTypeOptions() {
      const params = {
        hospitalCode: this.formData.hospitalCode,
        areaName: this.formData.areaName.join(',')
      }
      return new Promise(resolve => {
        getExamList(params).then(res => {
          if (res.code === 10000) {
            this.examTypeOptions = res.content.list
            resolve(res)
          }
        })
      })
    },
    getExamGroupOptions() {
      const params = {
        hospitalCode: this.formData.hospitalCode,
        areaName: this.formData.areaName.join(','),
        dep: this.formData.dep.join(','),
        examType: this.formData.examType.join(','),
        virtualRoom: this.formData.virtualRoom
      }
      return new Promise(resolve => {
        getCheckGroupList(params).then(res => {
          if (res.code === 10000) {
            this.checkGroupOptions = res.content.list
            resolve(res)
          }
        })
      })
    },
    handleChange(val) {
      switch (val) {
        case 'hospital':
          this.depAreaOptions = []
          this.departmentOption = []
          this.depOptions = []
          this.modalityOptions = []
          this.modalityTypeOptions = []
          this.areaNameOptions = []
          this.examTypeOptions = []
          this.formData.depArea = []
          this.formData.department = []
          this.formData.dep = []
          this.formData.modality = []
          this.formData.modalityType = []
          this.formData.areaName = []
          this.formData.examType = []
          this.tableData = []
          this.totalCount = 0
          try {
            this.getDepAreaOptions()
            this.getDepartment()
            this.getDepOptions()
            this.getModalityOptions()
            this.getModalityTypeOptions()
            this.getAreaNameOptions()
            this.getExamTypeOptions()
            this.getExamGroupOptions()
            // this.search()
          } catch (err) {
            console.log(err)
          }
          this.$nextTick(() => {
            this.$refs.hospAreaDepFilter && this.$refs.hospAreaDepFilter.init()
          })
          break
        case 'areaName':
          this.depAreaOptions = []
          this.departmentOption = []
          this.depOptions = []
          this.modalityOptions = []
          this.modalityTypeOptions = []
          this.examTypeOptions = []
          this.checkGroupOptions = []
          this.formData.depArea = []
          this.formData.department = []
          this.formData.dep = []
          this.formData.modality = []
          this.formData.modalityType = []
          this.formData.examType = []
          this.formData.checkGroup = []
          this.tableData = []
          this.totalCount = 0
          try {
            this.getDepAreaOptions()
            this.getDepOptions()
            this.getModalityOptions()
            this.getModalityTypeOptions()
            this.getExamTypeOptions()
            this.getExamGroupOptions()
            this.search()
          } catch (err) {
            console.log(err)
          }
          this.$nextTick(() => {
            this.$refs.hospAreaDepFilter && this.$refs.hospAreaDepFilter.reset()
          })
          break
        case 'depArea':
          // this.departmentOption = []
          this.depOptions = []
          this.modalityOptions = []
          this.modalityTypeOptions = []
          this.formData.department = []
          this.formData.dep = []
          this.formData.modality = []
          this.formData.modalityType = []
          this.formData.checkGroup = []
          this.checkGroupOptions = []
          try {
            // this.getDepartment()
            this.getDepOptions()
            this.getModalityOptions()
            this.getModalityTypeOptions()
            this.getExamGroupOptions()
            this.$refs.hospAreaDepFilter && this.$refs.hospAreaDepFilter.reset()
          } catch (err) {
            console.log(err)
          }
          break
        case 'examType':
          // this.departmentOption = []
          this.depOptions = []
          this.modalityOptions = []
          this.modalityTypeOptions = []
          this.formData.department = []
          this.formData.dep = []
          this.formData.modality = []
          this.formData.modalityType = []
          this.formData.checkGroup = []
          this.checkGroupOptions = []
          try {
            // this.getDepartment()
            this.getDepOptions()
            this.getModalityOptions()
            this.getModalityTypeOptions()
            this.getExamGroupOptions()
            this.$refs.hospAreaDepFilter && this.$refs.hospAreaDepFilter.reset()
          } catch (err) {
            console.log(err)
          }
          break
        case 'department':
          this.depOptions = []
          this.modalityOptions = []
          this.modalityTypeOptions = []
          this.formData.dep = []
          this.formData.modality = []
          this.formData.modalityType = []
          try {
            this.getDepOptions()
            this.getModalityOptions()
            this.getModalityTypeOptions()
          } catch (err) {
            console.log(err)
          }
          break
        case 'dep':
          this.modalityOptions = []
          this.formData.modality = []
          this.modalityTypeOptions = []
          this.formData.modalityType = []
          this.checkGroupOptions = []
          this.formData.checkGroup = []
          try {
            this.getModalityOptions()
            this.getModalityTypeOptions()
            this.getExamGroupOptions()
            this.$refs.hospAreaDepFilter && this.$refs.hospAreaDepFilter.reset()
          } catch (err) {
            console.log(err)
          }
          break
        case 'modalityType':
          this.modalityOptions = []
          try {
            this.getModalityOptions()
            this.$refs.hospAreaDepFilter && this.$refs.hospAreaDepFilter.reset()
          } catch (err) {
            console.log(err)
          }
          break
        default:
          break
      }
    },

    // 快速查询返回
    treeChange(data) {
      let area = data.area
      let dep = data.dep
      let areaChange = this.formData.depArea.length === 1 && this.formData.depArea[0] !== area
      this.formData.depArea = area ? [area] : []
      this.formData.dep = dep ? [dep] : []
      if (areaChange) {
        this.getDepOptions()
      }
      this.showRight = false
      this.bindShow = false
      this.formData.modality = []
      this.formData.modalityType = []
      this.formData.areaName = []
      this.formData.checkGroup = []
      this.formData.examType = []
      this.formData.virtualRoom = '-1'
      this.formData.department = []
      this.formData.checkRoomState = ''
      this.formData.checkRoom = ''
      this.getDepAreaOptions()
      this.getDepartment()
      this.getDepOptions()
      this.getModalityOptions()
      this.getModalityTypeOptions()
      this.getAreaNameOptions()
      this.getExamTypeOptions()
      this.getExamGroupOptions()
      this.search()
    }
  },
  beforeDestroy() {},
  destroyed() {},
  beforeUpdate() {},
  updated() {}
}
</script>
<style lang='scss' scoped>
.ky-container{
    .content-title{
        margin-bottom: 10px;
        span{
            font-size: 16px;
            font-family: PingFangSC-Medium, PingFang SC;
            font-weight: 600;
        }
        .add-button{
            width: 96px;
            height: 32px;
            margin-left: 16px;
        }
    }
    .toolBox{
        display: flex;
        justify-content: space-between;
        align-items: center;
        border-top: 1px solid #E5E7EC;
        padding: 12px 28px;
        position: fixed;
        bottom: 0;
        background: #fff;
        z-index: 10;
        margin-left: -20px;
        .toolBox-text{
            margin-left: 8px;
            font-size: 13px;
            font-family: PingFangSC-Regular, PingFang SC;
            font-weight: 400;
            color: rgba(0, 0, 0, 0.65);
            span{
                margin:0 4px;
            }
        }
        .cancle-click{
            cursor: pointer;
            font-size: 13px;
            font-family: PingFangSC-Regular, PingFang SC;
            font-weight: 400;
            color: #919398;
            margin-left: 32px;
        }
  }
  .toolBox-small{
      width: calc(100% - 210px);
  }
  .toolBox-midul{
      width: calc(100% - 54px);
  }
  .toolBox-large{
      width: 100%
  }
}
</style>
